<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择会员来源</view>

            <view class="flex p-[30rpx] pt-[0] text-sm font-500">
                <view v-if="sourceList.province.length" class="flex-1 pr-[10rpx]"
                    :class="{ 'text-[var(--primary-color)]': currSelect == 'province' }"
                    @click="currSelect = 'province'">
                    <view v-if="selected.province">{{ selected.province.label }}</view>
                    <view v-else>请选择</view>
                </view>

            </view>
            <scroll-view scroll-y="true" class="h-[70vh]">
                <view class="flex p-[30rpx] pt-0 text-sm">
                    <view v-if="sourceList.province.length" v-show="currSelect == 'province'">
                        <view v-for="item in sourceList.province" class="h-[80rpx] flex items-center"
                            :class="{ 'text-[var(--primary-color)]': selected.province && selected.province.id == item.id }"
                            @click="selected.province = item">{{ item.label }}</view>
                    </view>

                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { getSystemDictList, getAreaByCode } from '@/app/api/system'

const prop = defineProps({
    sourceId: {
        type: Number,
        default: 0
    }
})

const show = ref(false)
const sourceList = reactive({
    province: [],

})
const currSelect = ref('province')

const selected = reactive({
    province: null,

})

getSystemDictList({
    dictType: 'crm_customer_source',
    size: 1000
}).then(({ data }) => {
    console.log(data)
    sourceList.province = data.list
}).catch()

watch(() => prop.sourceId, (nval, oval) => {
    if (nval && !oval) {

        // getAreaByCode(nval).then(({ data }) => {
        //     data.province && (selected.province = data.province)
        //     data.city && (selected.city = data.city)
        //     data.district && (selected.district = data.district)
        // })
    }
}, {
    immediate: true
})




const emits = defineEmits(['complete'])

/**
 * 监听变更
 */
watch(() => selected.province, (nval) => {
    if (nval) {
        emits('complete', selected)
        show.value = false
    }
}, { deep: true })

const open = () => {
    show.value = true
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped></style>